<template>
  <div class="bodyTopo">
    <!-- 头部导航头部分 ,演练中显示-->
    <!-- v-if="drillStatus !=1 && !disabledAllBtn" -->
    <div class="header"> 
        <!-- <Tag  :color="taskStatusColor" title="试验状态" style="cursor:text;border-radius: 4px;"> {{ taskStatus }}</Tag> -->
        <template>
          <!-- 分割线  -->
          <!-- <span style="border:0.5px dashed #808080;margin: 0px 10px;"> </span>  -->
          <Button size="small" type="text" title="开始试验" v-if="drillStatus === 2 && taskStatusValue !== 'running' && !disabledAllBtn && showBtn('start')" @click="operationTask('start')"> <img @mouseover="mouseoverStart" @mouseleave="mouseleaveStart" :src="startModelSrc" />开始试验</Button >
          <!-- <Button size="small" type="text" title="暂停试验" @click="operationTask('pause')" v-if="showBtn('pause')"> <img @mouseover="mouseoverPause" @mouseleave="mouseleavePause" :src="pauseModelSrc" /> 暂停试验</Button > -->
          <Button size="small" type="text" title="结束试验" v-if="drillStatus === 3 && taskStatusValue !== 'stopped' && !disabledAllBtn && showBtn('stop')"  @click="operationTask('stop')"> <img @mouseover="mouseoverStop" @mouseleave="mouseleaveStop" :src="stopModelSrc" />结束试验</Button>
          <!-- <Button type="text" size="small" title="恢复试验" @click="operationTask('recover')" v-if="showBtn('recover')"><img @mouseover="mouseoverRecover" @mouseleave="mouseleaveRecover" :src="recoverModelSrc" /> 恢复试验</Button> -->
          <Button type="text" size="small" title="初始化试验" v-if="drillStatus === 1 && taskStatusValue !== 'initialized' && !disabledAllBtn && showBtn('init')" @click="operationTask('init')"><Icon class="initSceneHeadIcon" type="md-aperture" size="18" color="#777" />初始化试验</Button>
          <!-- <Button size="small" type="text" title="清空试验" @click="operationTask('clear')" v-if="showBtn('clear')"><img @mouseover="mouseoverClear" @mouseleave="mouseleaveClear"  :src="clearModelSrc" /> 清空试验</Button > -->
        </template>
    </div>
    <!-- 引入拖拽/连线/所有任务/单次型/持续型步骤组件 -->
    <processControl ref='processControl' :testStatus="taskStatusValue" :passParameter="getParameter" processStatus="t"></processControl>
    <div class="ivu-notice" style="top: 24px; right: 50%; transform:translateX(50%)" v-if="notice.show">
      <div class="ivu-notice-notice ivu-notice-notice-closable ivu-notice-notice-with-desc">
        <div class="ivu-notice-notice-content">
            <div class="ivu-notice-custom-content ivu-notice-with-icon ivu-notice-with-info  ivu-notice-with-desc">
                <span class="ivu-notice-icon ivu-notice-icon-warning">
                    <i class="ivu-icon ivu-icon-ios-alert-outline"></i>
                </span>
                <div class="ivu-notice-title">{{ notice.action }}</div>
                <div class="ivu-notice-desc"><p>攻击类型：{{ notice.name }}</p><p>危险等级：{{ notice.threat }}</p></div>
            </div>
        </div> 
        <div class="ivu-notice-content-with-icon"><!----></div> 
        <a class="ivu-notice-notice-close" @click.prev="closeNotice">
          <i class="ivu-icon ivu-icon-ios-close"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/axios1";
import $ from 'jquery';
// 引入拖拽部分组件
import processControl from "./processControl.vue";
//结束任务阶段过程归档下的组件
// import screenPlayback from "@/components/topologyDisplay/screenRecord/screenPlayback.vue"
// import processFiling from "@/components/topologyDisplay/processFiling/processFiling.vue"
import { color } from 'highcharts';

export default {
  name: "topologyShowNew",
  components: {
    processControl,
    // screenPlayback, //录屏回放
    // processFiling //实验日志
  },
  props:['step'],
  inject: ['detailParent'],
  data() {
    return {
      // 状态背景色变化
       taskStatusColor:"",
      //  实验图标移入高亮
       startModelSrc:require("../../../../assets/processControl/kssy_hui.png"),
       startModelSrc:require("../../../../assets/processControl/kssy_blue.png"),
       pauseModelSrc:require("../../../../assets/processControl/ztsy_hui.png"),
       pauseModelSrc:require("../../../../assets/processControl/ztsy_blue.png"),
       stopModelSrc:require("../../../../assets/processControl/jssy_hui.png"),
       stopModelSrc:require("../../../../assets/processControl/jssy_blue.png"),
       recoverModelSrc:require("../../../../assets/processControl/hfsy_hui.png"),
       recoverModelSrc:require("../../../../assets/processControl/hfsy_blue.png"),
       clearModelSrc:require("../../../../assets/processControl/qksy_hui.png"),
       clearModelSrc:require("../../../../assets/processControl/qksy_blue.png"),
       returnModelSrc:require("../../../../assets/processControl/fh_hui.png"),
       returnModelSrc:require("../../../../assets/processControl/fh_blue.png"),
       saveModelSrc:require("../../../../assets/processControl/bc_hui.png"),
       saveModelSrc:require("../../../../assets/processControl/bc_blue.png"),
      // 结束阶段显示的过程归档
      stopTaskBol:false,
      taskStatusBol:true,  //保存场景模板
      firstMenu: "configManage",
      secondMenu1: "userGroup",
      secondMenu2: 'user',
      secondMenu3: 'flowImage', // 'flowImage',
      secondMenu4: 'screenPlayback',
      drawerStyle: { display: "flex"},
      modal5: false,
      headerType: "",
      taskLoaing: true,
      deplogyBtn: true,
      clearDeplogyBtn: true,
      unCnacelDeplogy: true,
      projectName: "",
      currentProjectId: "",
      currentNetworkId: "",
      btnSwitchTopo: "primary",
      btnSwitchWorkflow: "default",
      topologyShow: true,
      topologyWorkflow: true,
      canvasContainerHeight: "800px",
      projectStatus: "",
      taskStatus: "",
      taskStatusValue:'',
      deplogyBtnKindOfByStatusData: [],
      deployOpeartion: "",
      contentHeight: "100px",
      peojectStatusPanel: true,
      topologyBtnPanel: true,
      workflowBtnPanel: true,
      globalSetinterval: null,
      contentHeights: "",
      currentSceneId: "",
      projectProcess: 0,
      projectProcessBol: true,
      disabledGroup: "",
      taskTimeLast: 0,
      taskTimeValue: 1,
      taskTimePanel: false,
      taskCountdownValue: "",
      currentTaskStartTime: null,
      currentTimeValue: null,
      currentTimeSetintervalu: null,
      formatTime: null,
      taskStatusObj:{
        initialized:{
          label:'初始化',
          value:'initialized',
          color:"green",
          showBtn:['start','clear']
        },
        running:{
          label:'运行中',
          value:'running',
          color:"success",
          showBtn:['pause','stop']
        },
        pausing:{
          label:'暂停中',
          value:'pausing',
          color:"warning",
          showBtn:['clear']
        },
        paused:{
          label:'已暂停',
          value:'paused',
          color:"warning",
          showBtn:['recover','clear']
        },
        completed:{
          label:'已完成',
          value:'completed',
          color:"error",
          showBtn:['clear']
        },
        stopping:{
          label:'停止中',
          value:'stopping',
          color:'purple',
          showBtn:['clear','stop']
        },
        stopped:{
          label:'已停止',
          value:'stopped',
          color:"purple",
          showBtn:['init','clear']
        }
      },
      notice:{
        show:false,
        list:[],
        name:'',
        title:'',
        threat:''
      }
    };
  },
  computed:{
      curShowBtn(){
        return this.taskStatusZh(this.taskStatusValue,'showBtn')
      },
      disabledAllBtn(){
          return this.detailParent.disabledAllBtn()
      },
      drillStatus(){
          return this.detailParent.drillStatus
      },
      taskStatus(){
          return this.detailParent.processStatus
      },
      taskStatusValue(){
        return this.taskStatusZh(response.data.status,'label');
      },
      taskStatusColor(){
        return this.taskStatusZh(response.data.status,'color');
      }
  },
  created() {
    this.currentProjectId = this.$route.query.prjId;
    this.currentSceneId = this.$route.query.id;
    // this.getProjectInformation();
    this.currentTimeSetintervalu = null;
    // this.getTaskStatus()
    // this.setintervalTime()
    // console.log('------------------------------------------------')
  },
  mounted() {
    // this.canvasContainerHeight = $(window).height() - 50
    // $('#contextBody').css('height',$(window).height() - 53)
    // this.contentHeight = $(window).height() - 92 + 'px'
    this.contentHeights = $(window).height() - 120 + "px";
    let windowWidth = document.body.clientWidth;
    let windowHeight = document.body.clientHeight;
    let $this = this;
    window.onresize = function () {
        if (document.body.clientWidth != windowWidth) {
          // location.reload();
        } else {
          // if(Math.abs(document.body.clientHeight-windowHeight)!=101){
          // 	location.reload()
          // }
        }
    };
  },
  watch:{
    taskStatus(val){
      if(val === '已停止' && this.drillStatus === 2){
        //演练是进行中时同时停止演练
        this.detailParent.startOrStopDrill(4);
      }
      this.detailParent.setProcessStatus(this.taskStatusValue);
    },
    drillStatus(val){
      if(val === 1 && this.taskStatusValue === 'stopped'){
        this.operationTask('init',false);
      }
    }
  },
  methods: {
    mouseoverStart(){this.startModelSrc=require("../../../../assets/processControl/kssy_blue.png")},
    mouseleaveStart(){this.startModelSrc=require("../../../../assets/processControl/kssy_hui.png")},
    mouseoverPause(){this.pauseModelSrc=require("../../../../assets/processControl/ztsy_blue.png")},
    mouseleavePause(){this.pauseModelSrc=require("../../../../assets/processControl/ztsy_hui.png")},
    mouseoverStop(){this.stopModelSrc=require("../../../../assets/processControl/jssy_blue.png")},
    mouseleaveStop(){this.stopModelSrc=require("../../../../assets/processControl/jssy_hui.png")},
    mouseoverRecover(){this.recoverModelSrc=require("../../../../assets/processControl/hfsy_blue.png")},
    mouseleaveRecover(){this.recoverModelSrc=require("../../../../assets/processControl/hfsy_hui.png")},
    mouseoverClear(){this.clearModelSrc=require("../../../../assets/processControl/qksy_blue.png")},
    mouseleaveClear(){this.clearModelSrc=require("../../../../assets/processControl/qksy_hui.png")},
    mouseoverReturn(){this.returnModelSrc=require("../../../../assets/processControl/fh_blue.png")},
    mouseleaveReturn(){this.returnModelSrc=require("../../../../assets/processControl/fh_hui.png")},
    mouseoverSave(){this.saveModelSrc=require("../../../../assets/processControl/bc_blue.png")},
    mouseleaveSave(){this.saveModelSrc=require("../../../../assets/processControl/bc_hui.png")},
    showBtn(type){
      return this.curShowBtn.includes(type)
    },
    closeNotice(){
      this.notice.show = false;
    },
    showNotice(data){
      this.notice = {...this.notice,...data,...{show:true}};
      setTimeout(() => {
        this.closeNotice()
      },20000);
    },
    taskStatusZh(val,type){
      let status = this.taskStatusObj[val];
      return status ? status[type] : type === 'color' ? 'green' : '初始化'
    },
    getTaskStatus(){
        axios({
            url:"/process/tests/"+this.currentSceneId+"/status",
        }).then((response)=>{
            if(response.code==1){
                this.taskStatusValue = response.data.status;
                this.taskStatus = this.taskStatusZh(response.data.status,'label');
                // 状态背景色
                this.taskStatusColor = this.taskStatusZh(response.data.status,'color');
            }else{
                this.$Message.error(response.message)
            }
        })
    },
    getParameter(value) {
        this.taskStatusValue = value.taskStatus;
        this.taskStatus = this.taskStatusZh(value.taskStatus,'label');
        this.taskStatusColor = this.taskStatusZh(value.taskStatus,'color');
    },
    operationTask(active,needTip = true) { //是否需要弹出提示
      let _this = this;
      if(!needTip){ //操作演练调用
        let op;
        if(this.taskStatusValue === 'initialized' && active === 'start'){
          op = 'start'
        }else if((this.taskStatusValue === 'running' ||  this.taskStatusValue === 'stopping') && active === 'stop'){
          op = 'stop'
        }else if(this.taskStatusValue === 'stopped' && active === 'init'){
          op = 'init'
        }
        op && this.$refs.processControl.opeartionTaskActive(op,false);
        return
      }
      if (active == "start") {
        _this.taskTimePanel = true;
        axios({
          url: "process/tests/" +this.currentSceneId + "/editor",
        }).then((response) => {
          if (response.code == 1) {
            let storageDateS = response.data.nodes;
            // console.log(response.data.test.startTime)
            _this.currentTaskStartTime = response.data.test.startTime;
            let arr = [];
            if (storageDateS && storageDateS.length != 0) {
              for (let index = 0; index < storageDateS.length; index++) {
                const element = storageDateS[index];
                let obj = {};
                if (element.taskList && element.taskList.length != 0) {
                  let num = 0;
                  for (let i = 0; i < element.taskList.length; i++) {
                    if (
                      element.taskList[i].taskType == "once_submit_flag" ||
                      element.taskList[i].taskType == "once_report" ||
                      element.taskList[i].taskType == "customize"
                    ) {
                      num = num + Number(element.taskList[i].duration);
                      // console.log(element.duration)
                      // console.log(num)
                    } else {
                      num++;
                    }
                  }
                  obj["time"] =
                    num + element.autoStartDelay + element.autoStopDelay;
                  obj["deepIndex"] = element.deepIndex;
                } else {
                  obj["time"] =
                    element.autoStartDelay + element.autoStopDelay + 1;
                  obj["deepIndex"] = element.deepIndex;
                }
                if (arr.length != 0) {
                  let bol = true;
                  for (let i = 0; i < arr.length; i++) {
                    if (obj.deepIndex == arr[i].deepIndex) {
                      bol = false;
                      if (obj.time > arr[i].time) {
                        arr[i].time = obj.time;
                      }
                    }
                  }
                  if (bol) {
                    arr.push(obj);
                  }
                } else {
                  arr.push(obj);
                }
              }
              _this.taskTimeLast = 0;
              _this.taskTimeValue = 0;
              for (let i = 0; i < arr.length; i++) {
                _this.taskTimeLast = _this.taskTimeLast + arr[i].time;
                _this.taskTimeValue = _this.taskTimeValue + arr[i].time;
              }
              // _this.formatTime = this.BASE.formatSeconds(_this.taskTimeLast);
              _this.$Modal.confirm({
                title: "执行",
                content: "您确定要开始当前流程吗？",
                onOk: () => {
                  // console.log('topoIview', this.$refs.processControl)
                  this.$refs.processControl.opeartionTaskActive("start");
                  // this.$refs.topoIview.$refs.routerVivew.opeartionTaskActive(
                  //   "start"
                  // );
                  localStorage.setItem("settingTime", this.taskTimeLast);
                  // console.log(this.taskTimeValue)
                  // this.setintervalTime();
                },
                onCancel: () => {},
              });
              // console.log(_this.taskTimeLast)
            }

            // console.log()
          } else {
            this.$Message.error(response.message);
          }
        });
      } else {
        let obj = {start:'开始',pause:'暂停',stop:'停止',recover:'恢复',init:'初始化',clear:'清空'};
        _this.$Modal.confirm({
          title: "执行",
          content: "您确定要" + obj[active] + "当前流程吗？",
          onOk: () => {
            _this.$refs.processControl.opeartionTaskActive(active);
          },
          onCancel: () => {},
        });
      }
    },
  },
};
</script>
<style type="text/css" scoped>

.bodyTopo{
    width: 100%;
    height: 100%;
    /* overflow: scroll; */
    overflow-y: hidden;
    overflow-x: hidden;
    /* border: 1px solid #ddd; */
}
/* 头部导航头的样式 */
.header {
  position: absolute;
    top: -65px;
    right: 20px;
  /* width: 100%; */
  height: 60px;
  /* color: #333; */
  /* background: #fff; */
  /* position: relative; */
  /* border: 1px solid #ddd; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header button img{
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 4px;
}
.header button > span {
  color: #333;
  font-size: 14px;
  margin-right: -3px;
}
.header button > span > i {
  color: #fff;
}
/deep/.ivu-radio-group label{
  margin-bottom: 0px;
}
.initSceneHeadIcon{
  margin-right: 4px;
  margin-top: -2px;
}
.projectName {
  font-size: 16px;
  color: #333333;
  font-weight: 600;
}
.rightU {
  /* width: 300px; */
  line-height: 60px;
  text-align: right;
  padding-right: 28px;
  /* 导调页面右上角用户名去掉移入鼠标小手 */
  float: text;
  margin-left: 25px;
  /* cursor: pointer; */
  font-size: 14px;
}
.img_userTopologyShowNew {
  width: 30px;
  height: 30px;
  vertical-align: text-top;
  position: relative;
  bottom: 9px;
  margin-left: -20px;
  margin-right: 0px;
  border-radius: 50%;
  cursor: text;
}
.userName_TopologyShowNew {
  padding-left: 10px;
  color: #333;
}
.ivu-btnm {
  margin-left: -3px;
}
.ivu-btnm img {
  margin-right: 8px;
  margin-bottom: 3px;
}
.ivu-radio-group {
  display: inline-block;
  font-size: 12px;
  /* line-height: 50px; */
  vertical-align: middle;
}

.btnConter {
  width: 160px;
  height: 60px;
  line-height: 60px;
  float: left;
  text-align: center;
}
.btnDeplogy {
  /* float: right; */
  /* line-height: 60px; */
}
.btnHeader {
  width: 80px;
}
.topologyShowContainer {
  height: 900px;
}
.layout {
  border-top: 0px;
}
.zIndexStyleBtn {
  position: relative;
  z-index: 55;
}
ul li {
  list-style: none;
}

/* 点配置阶段弹出的抽屉样式 */
/* 左侧抽屉 */
/* .ivu-drawer .ivu-drawer-left {
  width: 900px;
} */
.secondMenu {
  width: 190px;
  padding-left: 26px;
  margin-right: 16px;
}
/* 二级菜单里的素有水平线宽度 */
.ivu-divider-horizontal[data-v-9893d950] {
  display: block;
  height: 1px;
  width: 112px;
  min-width: 2px;
  margin: 0px 21px;
  clear: both;
}
/* 一级和二级选中菜单的背景色变为fff */
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  color: #2d8cf0;
  background: #fff;
  z-index: 2;
}
/deep/ .ivu-menu-item {
  color: #666666;
}
/* 二级菜单的标题字体加粗变黑 */
/deep/ .ivu-menu-vertical .ivu-menu-item-group-title {
  color: #333333;
  font-weight: 600;
}
/deep/ .ivu-drawer-close {
  z-index: 1;
  font-size: 12px;
  position: absolute;
  right: -26px;
  top: 0px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}

/* 主体的样式 */
.bodyLeft {
  width: 100%;
  height: 800px;
  background-image: url(../../../../assets/processControl/bg.png);
  /* background-image: url(../../../../assets/processControl/B2.png); */
  position: relative;
}
/* 分割线 */
.ivu-divider-horizontal {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  margin: 0px 0;
  clear: both;
}

.bodyTopRight {
  position: relative;
  font-size: 16px;
  color: #333333;
  font-weight: 600;
  margin-top: 20px;
  margin-right: 16px;
}
.bodyTopRighProject {
  position: absolute;
  bottom: 785px;
  right: 112px;
  margin-right: 36px;
}
.bodyTopRightScene {
  position: absolute;
  bottom: 785px;
  right: 0px;
}
.bodyRight {
  position: absolute;
  bottom: 50%;
  right: 0px;
  margin-right: 16px;
}

.rightNav {
  padding: 8px 6px;
  writing-mode: vertical-lr;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  cursor: pointer;
}
.activeRightNav {
  border: 1px solid #2d8cf0;
  color: #2d8cf0;
  border-radius: 3px;
  background-color: transparent;
}
</style>
